<template>
  <div class="home">
    <div class="home_top">
      <div class="gk_list img_sty">
        <div class="tit_sty">公开数据展示</div>
        <div class="gk_child1">
          <div>
            <p>20</p>
            <p>党务公开</p>
          </div>
          <div>
            <p>20</p>
            <p>政务公开</p>
          </div>
          <div>
            <p>20</p>
            <p>财务公开</p>
          </div>
        </div>
        <div class="gk_child2">
          <div>
            <p>20</p>
            <p>村务公开</p>
          </div>
          <div>
            <p>20</p>
            <p>居务公开</p>
          </div>
          <div>
            <p>20</p>
            <p>占位公开</p>
          </div>
          <div>
            <p>20</p>
            <p>占位公开</p>
          </div>
        </div>
      </div>
      <div class="gk_count">
        <div style="color:#0EFCFF;font-size: 22px;text-align: center;margin-top: 15px">政务服务大数据可视化监管平台</div>
        <div style="color:#0EFCFF;font-size: 22px;text-align: center;margin-top: 20px">案件公开数量 XX</div>
      </div>
      <div class="list_zs img_sty">
        <div class="tit_sty">XX数据展示</div>
        <div class="gk_child1">
          <div>
            <p>20</p>
            <p>今日公开</p>
          </div>
          <div>
            <p>20</p>
            <p>本周公开</p>
          </div>
        </div>
        <div class="gk_child2">
          <div>
            <p>20</p>
            <p>本月公开</p>
          </div>
          <div>
            <p>20</p>
            <p>办事指南</p>
          </div>
          <div>
            <p>20</p>
            <p>政策解读</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HomeView",
};
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  .home_top {
    width: 100%;
    display: flex;
    justify-content: space-around;
    // align-items: center;
    .gk_list {
      color: #197f9a;
      height: 167px;
      width: 25%;
      // padding: 10px 0;
      background-image: url("../images/main_top_left.png");
      .gk_child1 {
        display: flex;
        justify-content: space-around;
        margin: 2px;
        padding: 0 6px;
        color: #fff;
        font-size: 14px;
        div {
          margin-top: 10px;
          text-align: center;
          width: 31.5%;
          padding: 6px 0;
          p {
            margin: 2px 0;
          }
        }
        & div:first-child {
          background: #37d2d4;
        }
        & div:nth-child(2) {
          background: #18c987;
        }
        & div:nth-child(3) {
          background: #848ef7;
        }
      }
      .gk_child2 {
        display: flex;
        justify-content: space-around;
        margin: 2px;
        padding: 0 6px;
        color: #fff;
        font-size: 14px;
        div {
          margin-top: 4px;
          text-align: center;
          width: 23%;
          padding: 6px 0;
          p {
            margin: 2px 0;
          }
        }
        & div:first-child {
          background: #fc9033;
        }
        & div:nth-child(2) {
          background: #f6d10e;
        }
        & div:nth-child(3) {
          background: #2e8cfe;
        }
        & div:nth-child(4) {
          background: #f6580e;
        }
      }
    }
    .gk_count {
      // background: pink;
      height: 200px;
      width: 48%;
      background-image: url("../images/title_bg.png");
      background-size: 100% 60px;
      background-repeat: no-repeat;
    }
    .list_zs {
      color: #197f9a;
      height: 167px;
      width: 25%;
      background-image: url("../images/main_top_left.png");
      .gk_child1 {
        display: flex;
        justify-content: space-around;
        margin: 2px;
        padding: 0 6px;
        color: #fff;
        font-size: 14px;
        div {
          margin-top: 10px;
          text-align: center;
          width: 48%;
          padding: 6px 0;
          p {
            margin: 2px 0;
          }
        }
        & div:first-child {
          background: #37d2d4;
        }
        & div:nth-child(2) {
          background: #18c987;
        }
        & div:nth-child(3) {
          background: #848ef7;
        }
      }
      .gk_child2 {
        display: flex;
        justify-content: space-around;
        margin: 2px;
        padding: 0 6px;
        color: #fff;
        font-size: 14px;
        div {
          margin-top: 4px;
          text-align: center;
          width: 31.5%;
          padding: 6px 0;
          p {
            margin: 2px 0;
          }
        }
        & div:first-child {
          background: #848ef7;
        }
        & div:nth-child(2) {
          background: #2e8cfe;
        }
        & div:nth-child(3) {
          background: #f6580e;
        }
      }
    }
  }
}
.img_sty {
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.tit_sty {
  text-align: center;
  margin-top: 5px;
}
</style>
